<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/static/assets/css/layui.css">
</head>

<body>
<div style="background-color: #f2f2f2; padding: 20px">
    <div class="layui-row layui-col-space15" >
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">用户好评度</div>
                <div class="layui-card-body">
                    系统从上线以来，获得了用户的一致好评，好评度如下
                    <i class="layui-icon layui-icon-face-smile" style="font-size: 30px; color: lightseagreen;"></i>
                    <br/>
                    <div class="layui-progress layui-progress-big" lay-filter="demo" lay-showPercent="yes">
                        <div class="layui-progress-bar" lay-percent="99%"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">用户意见建议</div>
                <div class="layui-card-body">

                </div>
            </div>
        </div>
    </div>
    <div class="layui-row layui-col-space15">
        <div class="layui-card">
            <div class="layui-card-header">系统数据</div>
            <div class="layui-card-body">
                <div id="myChart" style="width: 600px;height:400px;"></div>
            </div>
        </div>
    </div>
</div>

</body>
</html>
<script src="/static/assets/layui.js"></script>
<script src="/static/assets/echarts.min.js"></script>
<script src="/static/assets/jquery.min.js"></script>
<script>
    //注意进度条依赖 element 模块，否则无法进行正常渲染和功能性操作
    layui.use(['element','jquery'], function(){
        let element = layui.element,
            jquery = layui.jquery;

        /* 基于准备好的dom，初始化echarts实例 */
        let myChart = echarts.init(document.getElementById('myChart'));

        $.ajax({
            url: '/accessInfo/getData',
            dataType: 'json',
            type: 'post',
            success: function (res) {
                fixed = res.data.fixed
                linshi = res.data.linshi
                /* 核心显示设置 */
                let option = {
                    /* 标题设置 */
                    title : {
                        text: '车辆出入饼状图',
                        x:'center'
                    },
                    tooltip : {
                        trigger: 'item',
                        formatter: " <br/>{b} : {c} ({d}%)"
                    },
                    /* 颜色和选项的对应关系 */
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data: ['临时车辆','私人车辆'],
                    },
                    /* 内容显示 */
                    series : [
                        {
                            name: '访问来源',  	//鼠标移至不同扇形区提示信息的标题
                            type: 'pie',	//指定数据生成的图表类型
                            radius : '55%',
                            center: ['50%', '60%'],
                            data:[
                                {value:linshi, name:'临时车辆'},
                                {value:fixed, name:'私人车辆'},
                            ],
                            /* 阴影区域设置 */
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };

                /* 使用刚指定的配置项和数据显示图表 */
                myChart.setOption(option);
            }
        })



    });
</script>